<template>
  <XTable 
    :columns="columns" 
    :get-data="reqGetSkuList" 
    :pagination="true">
    
    <template #img="{ row }">
      <img :src="row.skuDefaultImg" :alt="row.skuName" class="sku-img" />
    </template>
    <template #btns="{ row }">
      <el-button type="primary" link>上架</el-button>
      <el-button type="primary" link>编辑</el-button>
      <el-button type="primary" link>查看</el-button>
      <el-button type="primary" link>删除</el-button>
    </template>
  </XTable>
  <hr>
  <TableTest/>
</template>

<script lang="ts">
export default {
  name: "Test2",
};
</script>

<script lang="ts" setup>
import TableTest from './TableTest.vue'
import XTable from "../components/XTable/index.vue";
import { reqGetSkuList } from "../api";
import { ref } from "vue";
/* 
columns: 用于动态生成table的列el-table-column的数组
  el-table-column的属性: type/align/label/width/prop
  slot: 指定插槽名称
*/
const columns = ref([
  {
    type: "index",
    align: "center",
    label: "序号",
    width: 60,
  },
  {
    label: "名称",
    prop: "skuName",
  },
  {
    label: "描述",
    prop: "skuDesc",
  },
  {
    label: "默认图片",
    slot: "img",
  },
  {
    label: "操作",
    slot: "btns",
  },
]);
</script>

<style scoped>
.sku-img {
  width: 50px;
  height: 50px;
}
</style>
